<template>
  <el-dialog class="public-dialog" title="无法关联系统SKU" width="1100" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false" :append-to-body="true">
    <div>
      <div class="grid grid-cols-4">
        <VText title="平台" :value="orderInfo.platform" />
        <VText title="经营站点" :value="orderInfo.bind_site_name" />
        <VText title="店铺" :value="orderInfo.shop_name" />
      </div>
    </div>
    <div>商品信息</div>
    <div>
      <vxe-table ref="tableRef" :data="tableData" :round="true" maxHeight="500" :show-overflow="false">
        <vxe-column field="id" title="编号" width="100"></vxe-column>
        <vxe-column title="图片" width="84">
          <template #default="{ row }">
            <el-image :src="row.attr_img" width="30" height="30" style="border: 0.5px solid #f0f0f0; border-radius: 4px">
              <!-- <template #error>
                <img src="~@/assets/images/null-img.png" alt="" />
              </template> -->
            </el-image>
          </template>
        </vxe-column>
        <vxe-column field="origin_num" title="SKU 自定义SKU" width="170">
          <template #header>
            <div>
              <div>SKU</div>
              <div>自定义SKU</div>
            </div>
          </template>
          <template #default="{ row, rowIndex }">
            <p>{{ row.sku }}</p>
            <p>{{ row.custom_sku }}</p>
            <el-button v-if="!row.sku" type="primary" plain @click="handleAddSku(rowIndex, row)">+ 添加SKU </el-button>
          </template>
        </vxe-column>
        <vxe-column title="渠道SKU" width="140">
          <template #header>
            <div>
              <div>渠道SKU</div>
              <div>ASIN</div>
            </div>
          </template>
          <template #default="{ row }">
            <div>{{ row.platform_sku }}</div>
            <div>{{ row.asin }}</div>
          </template>
        </vxe-column>
        <vxe-column title="商品名称" field="sku_cn_title" width="120">
          <template #default="{ row }">
            <el-tooltip class="box-item" effect="dark" placement="top">
              <template #content>
                <div style="max-width: 110px">{{ row.sku_cn_title }}</div>
              </template>
              <div class="sku-title">{{ row.sku_cn_title }}</div>
            </el-tooltip>
          </template>
        </vxe-column>
        <vxe-column title="销售人员" field="operations_id" width="140">
          <template #default="{ row }">
            <Cascader v-model:modelValue="row.operations_id" type="personnel" :multiple="false" />
          </template>
        </vxe-column>

        <vxe-column title="物流属性" field="shipping_logistics_attr" width="88"></vxe-column>
        <vxe-column title="可用库存" field="local_inventory_num" width="88"> </vxe-column>
        <vxe-column field="opearn" title="操作" width="70" fixed="right">
          <template #default="{ row, rowIndex }">
            <el-link class="mr-2" size="small" type="primary" @click="resetProduct(rowIndex, row)">重置 </el-link>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <template #footer>
      <div class="flex items-center justify-center py-[10px]">
        <el-button :disabled="loading" @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSave"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>
  <SelectProduct v-model:visible="visible" :multiple="false" @uploadSku="handleSku" />
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus"
import SelectProduct from "@/components/SelectProduct/index.vue"

import Cascader from "@/components/XForm/components/Cascader/index.vue"
import { relateSku } from "../../api.js"
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  rows: { type: Object, default: () => ({}) },
})

const emit = defineEmits(["update:modelValue", "refresh"])

const tableRef = ref()

const tableData = ref([])
const skuOptions = ref({})
const skuLoading = ref(false)
const loading = ref(false)
const data = reactive({
  visible: false,
  rowIndex: "",
})
const orderInfo = ref({})
const { visible, rowIndex } = toRefs(data)

const handleSave = async () => {
  try {
    loading.value = true
    const tableData = tableRef.value.getTableData().tableData

    const _emptySku = tableData.findIndex((n) => !n.sku)
    console.log(tableData)
    if (_emptySku > -1) {
      ElMessage.warning(`请补充第${_emptySku + 1}个商品sku信息!`)
      return
    }
    let keys = [
      "sku",
      // "asin",
      "custom_sku",
      "operations_id",
      "sku_cn_title",
      // "attr_img",developer_id
      "spu",
      "spu_category",
      "spu_category_text",
      "create_time",
      "create_user",
      "developer_id",
      "developer_text",
      "purchase_untaxed_price",
      "sales_status_text",
    ]
    let params = { id: orderInfo.value.id }
    keys.forEach((key) => {
      params[key] = tableData[0][key] || ""
    })
    relateSku(params).then((res) => {
      handleClose(1)
    })
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      let data = { ...props.rows, operations_id: window.userInfo?.user?.user_id }
      console.log(data)
      orderInfo.value = data
      tableData.value = [data]
    }
  }
)
const handleClose = (refresh) => {
  tableData.value = []
  orderInfo.value = {}
  emit("update:modelValue", false)
  if (refresh == 1) {
    emit("refresh")
  }
}

const handleAddSku = (index, row) => {
  rowIndex.value = index
  visible.value = true
  emit("addSku", index)
}

const handleSku = (e) => {
  tableData.value[rowIndex.value] = { ...e, operations_id: window.userInfo?.user?.user_id }
  nextTick(() => {
    tableRef?.value.reloadData(tableData.value)
  })
}

const resetProduct = (index, _row) => {
  const row = {
    ..._row,
    main_img: "",
    sku: "",
    custom_sku: "",
    sku_cn_title: "",
    shipping_logistics_attr: "",
    available_stock: "",
    purchase_price: "",
  }
  tableData.value[index] = Object.assign({}, row)
  nextTick(() => {
    tableRef?.value.reloadData(tableData.value)
  })
}
</script>
<style lang="scss" scoped>
.sku-title {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>
